
.editor-wrapper{
  background: #fff;
  text-align: left;
  padding: 10px 0 24px 0;
  .details-top{
    width: calc(100% - 20px);
    display:flex;
    align-items: center;
    justify-content:space-between;
  }
  .breadcrumb{
    margin-left: 20px;
    .ant-breadcrumb-link{
      color: #646669;
      a{
        color: #0079FE;
      }
    }
  }
  .operation-wrapper{
    width: calc(100% - 220px);
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 12px 20px;
    >div{
      width: 49%;
      border-radius:2px;
      border: 1px solid #f0f0f0;
      box-shadow: 1px 2px 8px 0px rgba(50,52,55,0.16);
      padding: 10px 20px;
      box-sizing: border-box;
      height: 70px;
      color: #323437;
      font-weight: 500;
      font-size: 14px;
      p{
        margin: 0;
        font-weight: 400;
        font-size: 12px;
        color: #646669;
        margin-bottom: 4px;
      }
    }
    .next{
      text-align:right;
    }
    .next-only{
      margin-left: auto;
    }
  }
  .evaluate-wrapper{
    width: calc(100% - 220px);
    padding: 10px 40px;
    p{
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 0.5em;
      color: #323437;
    }
    >div{
      display: flex;
      align-items: center;
      color: #646669;
      margin-bottom: 1em;
      div{
        display: flex;
        align-items: center; 
        font-size: 14px;
        &:hover{
          .my-icon{
            cursor: pointer;
            // background: #E5F1FE;
            // fill:#007AF5;
          }
        }
      }
      .my-icon{
        width:36px;
        height:36px;
        border-radius: 50%;
        margin-right: 5px;
        display: flex;
        align-items: center; 
        justify-content: center;
        background: #EDEFF2;
        fill:#646669;
      }
      .kick{
        transform:rotateX(180deg);
      }
      div + div{
        margin-left:20px;
      }
    }
    
  }
}

.sider{
  flex:0 0 278px !important;
  min-width: 278px !important;
  max-width: 298px !important;
  min-height: calc( 100vh - 136px);
  border-right: 1px solid rgba(50,52,55,0.08);
  z-index: 9;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
  background: #F7FAFD;
  .ant-menu{
    background: transparent !important;
    color: #323437;
    border:0;
  }
  .ant-menu-root{
    margin-left:0;
    width: calc(100% - 42px);
  }
  .ant-menu-submenu-title{
    padding:0px 20px !important;
    font-weight: 500;
    margin: 0px;
    height:34px;
    line-height: 34px;
  }
  .ant-menu-submenu-title .ant-menu-submenu-arrow{
    right: 5px;
  }
  .ant-menu-submenu-title:hover,.ant-menu-item:hover{
    background: #E5F1FE;
  }
  .ant-menu-inline.ant-menu-root .ant-menu-item{
    font-weight: 500;
    height:34px;
    line-height: 34px;
    margin: 0px;
    padding:0 0 0 20px !important;
    a{
      font-weight: 500 !important;
    }
  }

  .ant-menu-inline .ant-menu-item::after{
    border-right: 0;
  }
  
  .ant-menu-sub.ant-menu-inline {
    > .ant-menu-item{
      height:34px;
      line-height: 34px;
      margin: 0px;
      padding-left: 26px !important;
      a{
        font-weight: normal !important;
      }
      .ant-menu-title-content{
        border-left: 1px solid #D4D6D9;
        padding-left: 10px;
      }
      &:hover{
        .ant-menu-title-content{
          position: relative;
          &::after{
            content: '';
            position: absolute;
            left: 0px;
            top: 8px;
            width: 1px;
            height:18px;
            background: #0079FE;
          }
        }
      }
    }

    > .ant-menu-item-selected{
      .ant-menu-title-content{
        position: relative;
        &::after{
          content: '';
          position: absolute;
          left: 0px;
          top: 8px;
          width: 1px;
          height:18px;
          background: #0079FE;
        }
      }
    }
  }
}

.type-select{
  margin: 22px 0 16px 0;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content:flex-start;
  background: rgba(0, 0, 0, 0.05);
  height:36px;
  border-radius:2px;
  padding: 10px;
  background: #E5F1FE;
  .my-icon{
    width:22px;
    height:auto;
  }
  .select-label{
    margin-left: 10px;
    font-size: 16px;
    color: #007AF5;
    font-weight: 500;
  }
  >div{
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content:center;
    font-size: 10px;
  }
}
.add_Btn{
  // float: right;
  width: 34px;
  line-height: 82px;
  // border: 1px solid #000;
}
.ant-dropdown-menu-item-active{
  color: #007AF5;
  background-color: #E5F1FE !important;
}

.site-layout{
  overflow: inherit;
  margin-left: 288px;
  height: 100%;
  box-shadow: 0px 2px 4px 0px rgba(50,52,55,0.08);
}

.nav-wrapper{
  background: #fff;
}

.nav-list{
  display:inline-flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  align-content: center;
}

.nav{
  margin: 20px;
}

.editing-wrapper{
  min-width: 1440px;
  background: #fff;
  min-height: calc( 100vh - 140px);
  text-align:left;
  .editing-title{
    display: flex;
    align-items:center;
    justify-content:space-between;
    padding: 10px 20px;
    box-sizing: border-box;
    > h3{
      text-align: left;
      margin: 0;
    }
    .ant-btn + .ant-btn{
      margin-left: 10px;
    }
  }
  .ant-divider{
    margin: 0;
  }
  .editing-editor{
    height: calc(100vh - 190px);
    overflow:scroll;
  }
}

.menu-title-wrapper{
  display: flex;
  align-items:center;
  justify-content:space-between;
  &:hover{
    .menu-actions{
      display: block;
    }
  }
  .menu-title{
    flex: 1;
    white-space: nowrap;
    text-shadow: ellipsis;
    overflow: hidden;
  }
  .menu-actions{
    display:none;
    .anticon{
      color: #323437;
      &:hover{color: #007AF5;}
    }
    .anticon + .anticon{
      margin-left: 5px;
    }
  }
}
// 操作
.opt-btn{
  width: 20px;
  height: 34px;
  margin-left: 4px;
  line-height: 34px;
  text-align: center;
}

.opt-btn-r{
  width: 20px;
  height: 38px;
  margin-left: 4px;
  line-height: 40px;
  float: right;
  // margin-right: 15px;
}

.breadcrumb{
  margin: 10px 0px;
}
// 滚动条
.sider{
  &::-webkit-scrollbar{ /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb{ /*滚动条里面小方块*/
    border-radius: 8px;
    background: #cfcbcb;
  }
  &::-webkit-scrollbar-track{ /*滚动条里面轨道*/
    border-radius: 10px;
    background: #ededed;
  }
}

.__markdown-editor-reactjs-container .write-spin .__markdown-editor-reactjs-markdown-main .__markdown-editor-reactjs-toc-layout #__markdown-editor-reactjs-toc{
  overflow-y: auto !important;
}
// 编辑按钮
.edit-btn{
  // position: fixed;
  // top: 76px;
  // right: 16px;
  // z-index: 666;
  margin-left: auto;
}
#__markdown-editor-reactjs-toc li:hover{
  border-left: none;
}